<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2016/10/28
  Time: 16:05
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="easyui/demo/demo.css">
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="js/listview_grid_js/jquery.edatagrid.js"></script>
    <!-- main_css link -->
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <!--topNav_css link-->
    <link rel="stylesheet" href="css/topNav_css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/topNav_css/zzsc.css">
    <link rel="stylesheet" type="text/css" href="css/topNav_css/ripple.css">
    <!-- search_css link -->
    <link rel="stylesheet" type="text/css" href="css/search_css/normalize.css"/>
    <link rel="stylesheet" href="css/search_css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="css/search_css/demo.css">
    <link rel="stylesheet" href="css/search_css/style.css">

    <script>
    </script>
    <title>Configuration Provider</title>
</head>
<body background="img/main_bg.jpg" style="">
<!-- 最大容器 -->
<div id="bigpanel_div">
    <!--顶部导航层-->
    <div id="top_div" style="width: 100%;height: 15%;margin: 0;">
        <img class="leftfloat" style="width: 20%;margin: 15px 0px 0px 15px;" id="logoImg" src="img/logo.jpg" title="Configuration Provider" />
        <div style="clear:both;"></div>

    </div>
    <!--导航条下方容器-->
    <div id="panel_div" style="width: 100%;height: 75%;margin: 0;padding-bottom: 20px;">
        <!--������ε�����-->
        <div style="width: 20%;height: 100%;margin: 0 0 0 10px;">

            <div id="leftNavTree_div" class="leftfloat" style="width: 270px;height:577px;margin:10px 0px 0px 0px;overflow:hidden;border-radius: 5px;">
                <!--<div style="margin:20px 0;"></div>-->
                <div class="panel" style="display: block;width: 270px;height: 578px;padding-bottom: 25px;border-radius: 5px;">
                    <div class="easyui-panel panel-body panel-body-noheader" style="padding: 50px 5px 5px;border-radius: 5px;width: 266px;height: 570px;" title="">
                        <ul id="tt" class="easyui-tree" data-options="
                           url:'GetData',
			                method: 'get',
			                animate: true,
			                onContextMenu: function(e,node){
			                    e.preventDefault();
			                    $(this).tree('select',node.target);
			                    $('#mm').menu('show',{
			                        left: e.pageX,
			                        top: e.pageY
			                    });
			                },
			           		">

                            <script>
                                $(function () {
                                    $('#tt').tree({
                                        textFiled: "dataName",
                                        parentField: "dataPid",
                                        idFiled: "dataId",
                                        //收起来
                                        onLoadSuccess: function () {
                                            $("#tt").tree("collapseAll");
                                        }
                                    });
                                });
                                $.fn.tree.defaults.loadFilter = function (data, parent) {
                                    var opt = $(this).data().tree.options;
                                    var idFiled,
                                            textFiled,
                                            parentField;
                                    if (opt.parentField) {
                                        idFiled = opt.idFiled || 'id';
                                        textFiled = opt.textFiled || 'text';
                                        parentField = opt.parentField;

                                        var i,
                                                l,
                                                treeData = [],
                                                tmpMap = [];

                                        for (i = 0, l = data.length; i < l; i++) {
                                            tmpMap[data[i][idFiled]] = data[i];
                                        }

                                        for (i = 0, l = data.length; i < l; i++) {
                                            if (tmpMap[data[i][parentField]] && data[i][idFiled] != data[i][parentField]) {
                                                if (!tmpMap[data[i][parentField]]['children'])
                                                    tmpMap[data[i][parentField]]['children'] = [];
                                                data[i]['text'] = data[i][textFiled];
                                                tmpMap[data[i][parentField]]['children'].push(data[i]);
                                            } else {
                                                data[i]['text'] = data[i][textFiled];
                                                treeData.push(data[i]);
                                            }
                                        }
                                        return treeData;
                                    }
                                    return data;
                                };
                            </script>

                        </ul>
                    </div>
                    <div id="mm" class="easyui-menu" style="width:120px;">
                        <div onclick="append()" data-options="iconCls:'icon-add'">New</div>
                        <div onclick="removeit()" data-options="iconCls:'icon-remove'">Remove</div>
                        <div class="menu-sep"></div>
                        <div onclick="expand()">Expand</div>
                        <div onclick="collapse()">Collapse</div>
                    </div>
                    <script type="text/javascript">
                        function append() {
                            var t = $('#tt');
                            var node = t.tree('getSelected');
                            var str = prompt("NodeName:", "");
                            $.post("addData", {dataName: str, dataPid: node.dataId},
                                    function (result) {
                                      //  alert("Data Loaded: " + data);
                                        var result = eval('('+result+')');

                                        $.messager.show({
                                            title:'操作提示',
                                            msg:"添加成功！",
                                            timeout:2000,
                                            showType:'slide'
                                        });

                                        t.tree('append', {
                                            parent: (node ? node.target : null),
                                            data: {
                                                dataName: str, dataPid: node.dataId,dataId:result.dataId,
                                            }
                                        });
                                        selectNode(node);
                                        $('#tt').tree('select', node.target);
                                        $('#tt').tree('expand', node.target);
                                    });
                        }

                        function removeit() {
                            var node = $('#tt').tree('getSelected');
                            var nodeParent = $('#tt').tree('getParent',node.target);
                            $('#tt').tree('remove', node.target);
                            $.post("dataDelete", {id: node.dataId},
                                    function (data) {
                                        //alert("Data Loaded: " + data);
                                        $.messager.show({
                                            title:'操作提示',
                                            msg:"删除成功！",
                                            timeout:2000,
                                            showType:'slide'
                                        });

                                        selectNode(nodeParent);
                                        $('#tt').tree('select', nodeParent.target);

                        })
                        }

                        function collapse() {
                            var node = $('#tt').tree('getSelected');
                            $('#tt').tree('collapse', node.target);
                        }

                        function expand() {
                            var node = $('#tt').tree('getSelected');
                            $('#tt').tree('expand', node.target);
                        }
                    </script>
                </div>
            </div>
        </div>
        <!--导航树右边容器-->
        <div id="rightpanel_div" class="rightpanel_div"
             style="width: 78%;height: 577px; background: white;overflow: auto;">
            <div style="width: 100%;height: 100%;background: white;">
                <!--listview上方工具栏-->
                <div id="listviewNav_div">
                    <div id="searchTool_div" class="rightfloat" style="width: 100%;">
                        <div id="search" class="search d7 rightfloat">
                            <form>
                                <input type="text" placeholder="Search">
                                <button type="submit"></button>
                            </form>
                        </div>
                    </div>
                    <div style="clear: both;"></div>
                </div>
                <!--listview-->
                <div id="listview_div">
                    <table id="dg" title="Detailed Information" style="width:100%;height:520px" toolbar="#toolbar"
                            idField="data_id" rownumbers="true"
                           fitColumns="true" singleSelect="true">
                        <thead>
                        <tr id="dgg">
                            <th field="dataName" width="50" >Name
                            </th>
                            <th field="dataType" width="50" >Type
                            </th>
                            <th field="fullname" width="50" >
                                FullName
                            </th>

                        </tr>
                        </thead>
                    </table>
                    <div id="toolbar">
                        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick=addDate()>New</a>
                        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick=removeDate()>Remove</a>
                        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick=editData()>Edit</a>

                    </div>
                    <script type="text/javascript">
                        function editData() {
                            var row = $("#dg").datagrid("getSelected");
                            if (row) {
                                $("#dlg2").dialog("open").dialog('setTitle', 'Edit Data');
                                $("#fm2").form("load", row);
                                //url = "UserManage.aspx?id=" + row.ID;
                            }
                        }

                        function addDate(){
                            var node = $('#tt').tree('getSelected');
                            node.dataPid=node.dataId;
                            node.dataName='';
                            if(node){
                                $("#fm").form("load", node);
                            }
                            $('#dlg').dialog('open').dialog('setTitle','New data');
                            //$('#fm').form('clear');
                        }

                        function SaveEditdata(){
                            var row = $("#dg").datagrid("getSelected");
                            var rowIndex=$('#dg').datagrid('getRowIndex',$('#dg').datagrid('getSelected'));
                            $('#fm2').form('submit',{
                                url: 'dataEdit',
                                onSubmit: function(){
                                    return $(this).form('validate');
                                },
                                success: function(result){
                                    var result = eval('('+result+')');
                                    if (result.errorMsg){
                                        $.messager.show({
                                            title: 'Error',
                                            msg: result.errorMsg
                                        });
                                    } else {
                                        $('#dg').edatagrid('updateRow',{
                                            index: rowIndex,
                                            row: {"dataType":result.dataType,"dataName":result.dataName,"fullname":result.fullname}
                                        });
                                        $('#dlg2').dialog('close'); // close the dialog2
                                        $.messager.show({
                                            title:'操作提示',
                                            msg:"修改成功！",
                                            timeout:2000,
                                            showType:'slide'
                                        });
                                    }
                                }
                            });
                        }



                        function SaveNewdata(){

                            $('#fm').form('submit',{
                                url: 'addListData',
                                onSubmit: function(){
                                    return $(this).form('validate');
                                },
                                success: function(result){
                                    var result = eval('('+result+')');
                                    if (result.errorMsg){
                                        $.messager.show({
                                            title: 'Error',
                                            msg: result.errorMsg
                                        });
                                    } else {
                                        $('#dg').edatagrid('insertRow',{
                                            index: 0,
                                            row: {"dataId":result.dataId,"dataType":result.dataType,"dataName":result.dataName,"fullname":result.fullname}
                                        });
                                        $('#dlg').dialog('close'); // close the dialog
                                        $.messager.show({
                                            title:'操作提示',
                                            msg:"增加成功！",
                                            timeout:2000,
                                            showType:'slide'
                                        });
                                    }
                                }
                            });
                        }

                        function removeDate(){
                            var row = $('#dg').edatagrid('getSelected');
                            var rowIndex=$('#dg').datagrid('getRowIndex',$('#dg').datagrid('getSelected'));
                            if (row){
                                $.messager.confirm('Confirm','Are you sure you want to remove this data?',function(r){
                                    if (r){
                                        $.post('dataListDelete',{id:row.dataId},function(data){
                                            $('#dg').edatagrid('deleteRow',rowIndex);
                                            $.messager.show({
                                                title:'操作提示',
                                                msg:"删除成功！",
                                                timeout:2000,
                                                showType:'slide'
                                            });
                                        }
                                   );
                                    }
                                });
                            }else{
                                $.messager.show({
                                    title:'操作提示',
                                    msg:"请选择要删除的行",
                                    timeout:2000,
                                    showType:'slide'
                                });
                            }
                        }

                        function selectNode (node) {
                            $.post("selectedNode", {name: node.dataId}, function (data) {
                                $(function () {
                                    data = JSON.parse(data);
                                    $('#dg').edatagrid('loadData', data);
                                });
                            });
                        }

                        $(document).ready(function () {
                            $('#tt').tree({
                                onClick: selectNode
                            })
                            $('#dg').edatagrid({
                                onDblClickRow: function () {
                                    var row = $('#dg').edatagrid('getSelected');
                                    $.post("selectedNode", {name: row.dataId}, function (data) {
                                        $(function () {
                                            data = JSON.parse(data);
                                            $('#dg').edatagrid('loadData', data);
                                        });
                                    });

                                }
                            })
                        })

                    </script>
                </div>
                <div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px" closed="true" buttons="#dlg-buttons">
                    <div class="ftitle">New Data</div>
                    <form id="fm" method="post">
                        <div class="fitem">
                            <label>Parent Id</label>
                            <input name="dataPid" class="easyui-validatebox" required="true" readonly="true" style="border: none">
                        </div>
                        <div class="fitem">
                            <label>Name</label>
                            <input name="dataName" class="easyui-validatebox" required="true">
                        </div>
                        <div class="fitem">
                            <label>Type</label>
                            <select name="dataType" required="true" style="width: 135px">
                                <option value="Configuration">Configuration</option>
                                <option value="Section" selected="selected">Section</option>
                                <option value="Property">Property</option>
                                <option value="Value">Value</option>
                            </select>
                        </div>
                    </form>

                    <style type="text/css">
                    #fm
                    {
                        margin: 0;
                        padding: 10px 30px;
                    }
                    .ftitle
                    {
                        font-size: 14px;
                        font-weight: bold;
                        padding: 5px 0;
                        margin-bottom: 10px;
                        border-bottom: 1px solid #ccc;
                    }
                    .fitem
                    {
                        margin-bottom: 5px;
                    }
                    .fitem label
                    {
                        display: inline-block;
                        width: 80px;
                    }
                </style>

                </div>
                <div id="dlg-buttons" >
                    <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="SaveNewdata()">Save</a>
                    <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">Cancel</a>
                </div>

                <div id="dlg2" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px;overflow: hidden" closed="true" buttons="#dlg-buttons2">
                    <div class="ftitle">DataEdit</div>
                    <form id="fm2" method="post">
                        <div class="fitem">
                            <label>ID</label>
                            <input name="dataId" class="easyui-validatebox" required="true" readonly="true">
                        </div>
                        <div class="fitem">
                            <label>Parent Id</label>
                            <input name="dataPid" class="easyui-validatebox" required="true" readonly="true">
                        </div>
                        <div class="fitem">
                            <label>Name</label>
                            <input name="dataName" class="easyui-validatebox" required="true">
                        </div>
                        <div class="fitem">
                            <label>Type</label>
                            <select name="dataType" required="true" style="width: 135px">
                                <option value="Configuration">Configuration</option>
                                <option value="Section" selected="selected">Section</option>
                                <option value="Property">Property</option>
                                <option value="Value">Value</option>
                            </select>
                        </div>
                        <div class="fitem">
                            <label>FullName</label>
                            <input name="fullname" class="easyui-validatebox" required="true">
                        </div>
                    </form>

                    <style type="text/css">
                        #fm
                        {
                            margin: 0;
                            padding: 10px 30px;
                        }
                        .ftitle
                        {
                            font-size: 14px;
                            font-weight: bold;
                            padding: 5px 0;
                            margin-bottom: 10px;
                            border-bottom: 1px solid #ccc;
                        }
                        .fitem
                        {
                            margin-bottom: 5px;
                        }
                        .fitem label
                        {
                            display: inline-block;
                            width: 80px;
                        }
                    </style>

                </div>
                <div id="dlg-buttons2" >
                    <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="SaveEditdata()">Save</a>
                    <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg2').dialog('close')">Cancel</a>
                </div>
            </div>
            <div style="clear: both;"></div>
        </div>
    </div>
</div>
</body>

</html>
